<!--零工招聘-->
<template>
  <view class="pb-100">
    <view class="p-20" style="background: #fd7753">
      <up-search placeholder="日照香炉生紫烟" v-model="state.keyword" :clearabled="true" :showAction="false"
                 @search="search"></up-search>
    </view>
    <at-card>
      <view class="flex-grid-5">
        <view v-for="item of gigWorkGroup" :key="item.name" class="flex-c-center py-10">
          <img :src="item.icon" alt="" style="width: 80rpx;height: 80rpx" mode="aspectFill"/>
          <view class="f-s-m mt-10">{{ item.name }}</view>
        </view>
      </view>
    </at-card>
    <view class="mt-20">
      <up-sticky bg-color="#f5f5f5">
        <view class="flex-between p-20">
          <up-select v-model:current="cateId" label="性别限制"
                     :options="cateList" @select="selectItem"></up-select>
          <up-select v-model:current="cateId" label="价格"
                     :options="cateList" @select="selectItem"></up-select>
          <up-select v-model:current="cateId" label="工种"
                     :options="cateList" @select="selectItem"></up-select>
          <up-select v-model:current="cateId" label="区域"
                     :options="cateList" @select="selectItem"></up-select>
        </view>
      </up-sticky>
    </view>
    <view>
      <gig-work-card v-for="item of 10" :key="item"/>
    </view>
    <!--这个只有老板才能有-->
    <up-float-button :isMenu="false" right="40rpx" bottom="100rpx" backgroundColor="#ff7100"
                     @click="toPath('/work/publishGig/publishGig')">
    </up-float-button>
  </view>
</template>

<script setup lang="ts">
import {gigWorkGroup} from "@/utils/config/options";
import {reactive} from "vue";
import GigWorkCard from "@/components/home/gig-work-card.vue";
import {toPath} from "@/utils/commonUtils";

const state = reactive({
  keyword: ''
})

const search = () => {
  console.log(state.keyword)
}
</script>


<style scoped lang="scss">

</style>
